{extend name='layout:app'}

{block name='css'}
<link rel="stylesheet" href="__STATIC__/css/person-info.css">
<script src="/static/layer/layer.js"></script>
{/block}

{block name='content'}
    <div id="app">
        <div class="nav">
            <i class="el-icon-arrow-left icon_left" @click="back"></i>
            <div>个人资料</div>
            <i class="iconfont icon-home icon_right" @click="home"></i>
        </div>

        <div class="person-info" v-loading="loading">
            <div class="item" style="line-height: 55px">
                <span>我的头像</span>
                <span style="position: absolute;color: #969696;width: 15%;top: 10px;">
<!--                        <img src="__STATIC__/imgs/avatar.png" >-->
<!--                    <el-progress type="circle" :percentage="50"></el-progress>-->
                    <el-upload
                    class="avatar-uploade"
                    action="/index/person/headimg"
                    name="image"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar" style="border-radius: 50%">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </span>
<!--                <i class="el-icon-arrow-right"></i>-->
            </div>
            <div class="item">
                <span>我的名字</span>
                <span>{$Think.session.user.name}</span>
                <i class="el-icon-arrow-right"></i>
            </div>
            <a href="/index/person/myphone">
            <div class="item">
                <span>绑定手机号码</span>
                <span>{$Think.session.user.phone|substr=0,3}****{$Think.session.user.phone|substr=-4,4}</span>
                <i class="el-icon-arrow-right"></i>
            </div></a>
            <div class="item">
                <span>绑定身份证号码</span>
                <span>{$Think.session.user.idCard|substr=0,4}****{$Think.session.user.idCard|substr=-4,4}</span>
                <i class="el-icon-arrow-right"></i>
            </div>
        </div>
    </div>
{/block}

{block name='js'}
<script>
    var that

    new Vue({
        el:'#app',
        data() {
            return {
                imageUrl: '{$Think.session.user.image}',
                loading: false
            }
        },
        mounted() {
            that = this  //生成vue副本
        },
        methods: {
            back() {
                window.history.go(-1)
            },
            home() {
                location.href = '/'
            },
            handleAvatarSuccess(res, file) {
                // this.imageUrl = URL.createObjectURL(file.raw);
                this.loading = false
                this.imageUrl = res.data.src;
                this.$message.success('上传成功！');
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt5M = file.size / 1024 / 1024 < 5;
                this.loading = true
                if (!isJPG) {
                    this.loading = false
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt5M) {
                    this.loading = false
                    this.$message.error('上传头像图片大小不能超过 5MB!');
                }
                // console.log(isLt5M)
                return isJPG && isLt5M ;
            }
        }
    });
</script>
{/block}